<template>
<div class="welisten-product-create">
	<Row>
		<Col :span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu(0)"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem :to="{'name':'welisten-product-index'}">产品列表</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner20"></div>
		</Col>
	</Row>
	<Form ref="vform" :model="vform" :label-width="100"  :rules="ruleValidate">
		<Row type="flex" :gutter="16">
			<Col :span=18>
				<Row type="flex">
					<Col :span="24">
						<FormItem label="产品标题" prop="title">
							<Input v-model="vform.title" placeholder="请填写产品标题"></Input>
						</FormItem>
					</Col>
					<Col :span="6">
						<FormItem ref="realname" label="用户名称" prop="realname">
							<Input v-model="vform.realname" placeholder="请填写用户名称" readonly>
								<Icon type="md-search" slot="suffix" @click.native="onSelectUser"></Icon>
							</Input>
						</FormItem>
					</Col>
					<Col :span="5">
						<FormItem label="服务类型">
							<i-switch v-model="vform.service_type" size="large" :true-value="1" :false-value="0">
								<span slot="open">通话</span>
								<span slot="close">文字</span>
							</i-switch>
						</FormItem>
					</Col>
					<Col :span="5">
						<FormItem label="产品分类">
							<i-switch v-model="vform.product_type" size="large" :true-value="1" :false-value="0">
								<span slot="open">套餐</span>
								<span slot="close">单品</span>
							</i-switch>
						</FormItem>
					</Col>
					<Col :span="6">
						<FormItem label="通话单价/分钟">
							<InputNumber readonly :max="999" :min="0" :step="0.01" v-model="vform.percallprice"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="6">
						<FormItem label="通话步长">
							<InputNumber readonly :max="999" :min="0" :step="0.01" v-model="vform.percallstep"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="6">
						<FormItem label="文字单价/分钟">
							<InputNumber readonly :max="999" :min="0" :step="1" v-model="vform.pertextprice"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="6">
						<FormItem label="文字步长">
							<InputNumber readonly :max="999" :min="0" :step="1" v-model="vform.pertextstep"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="产品分组" prop="classify">
							<Select v-model="vform.classify" multiple >
								<Option v-for="(item,index) in classifyList" :value="item.value" :key="index">{{ item.label }}</Option>
							</Select>
						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="备注">
							<Input v-model="vform.memo" placeholder="请填写备注"></Input>
						</FormItem>
					</Col>

					<Col :span="24">
						<Table :loading="spinShow" border stripe :columns="columns"  :data="productList"></Table>
					</Col>
				</Row>
			</Col>
			<Col :span=6>
				<Card >
					<p slot="title">
						<Icon type="ios-film-outline"></Icon>
						基本信息
					</p>

					<div style="padding-left:10px;padding-right:10px;padding-bottom:10px">
						<FormItem label="状态" prop="status">
							<Select v-model="vform.status" >
								<Option v-for="(item,index) in statusList" :value="item.value" :key="index">{{ item.label }}</Option>
							</Select>
						</FormItem>
						<FormItem label="权重" prop="sequence">
							<InputNumber :max="9999" :min="1" :step="1" v-model="vform.sequence"></InputNumber>
						</FormItem>
						<FormItem label="最大倍数" prop="multiple">
							<InputNumber :max="75" :min="1" :step="1" v-model="vform.multiple"></InputNumber>
						</FormItem>
						<FormItem label="优惠金额" prop="discount">
							<InputNumber :max="99999" :min="0" :step="0.01" v-model="vform.discount"></InputNumber>
						</FormItem>
						<FormItem label="开始时间" prop="started_at">
							<DatePicker @on-change="changeStartedDate" :value="vform.started_at" type="date" show-week-numbers placement="bottom-end" placeholder="请选择开始时间"></DatePicker>
						</FormItem>
						<FormItem label="结束时间" prop="end_at">
							<DatePicker @on-change="changeEndDate" :value="vform.end_at" type="date" show-week-numbers placement="bottom-end" placeholder="请选择结束时间"></DatePicker>
						</FormItem>
						
						<Button type="success" @click="onSave">保存</Button>
						<Button v-if="''!=vform.uid" type="info" @click="onSearch">查看此用户产品</Button>
					</div>
				</Card>
			</Col>

		</Row>
	</Form>

	<Listener-Selector  :show.sync="showBox" @on-hide="showBox=false" @on-change="onListenerChange"></Listener-Selector>
	

</div>
</template>
<script>
// 引入子组件
import ListenerSelector from '@/components/ListenerSelector/ListenerSelector.vue'
import {mapState,mapGetters} from 'vuex'
import { Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button,  Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber } from 'iview';
export default { 
	name:'welisten-product-create',
	components: { Tag, Card, Page, Modal, ListenerSelector, Spin, Row, Col, ButtonGroup, Button, Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber},
	data () {
		return {
			title:'新建',
			showBox:false,
			spinShow:false,
			listenerObj:{},
			
			columns:[
				{title: '编号',key: 'id',width: 90,fixed: 'left'},
				{title: '产品名称',key: 'title'},
				{title: '状态',key: 'status',
					render: (h, params) => {
						let _status=['暂存','上架','下架']
						return h('div',[
							h('span', {
							class: 1==params.row.status?'success':(2==params.row.status?'warning':(3==params.row.status?'error':'draft')),
						}, _status[params.row.status]),
						])
					}
				},
				{title: '服务类型',key: 'service_type',
					render: (h, params) => {
						let _status=['文字','通话']
						return h('div',[
							h('span', {
							class: 1==params.row.product_type?'info':'success',
						}, _status[params.row.service_type]),
						])
					}
				},
				{title: '产品类型',key: 'product_type',
					render: (h, params) => {
						return h('div',[
							h('span', {
							class: 1==params.row.product_type?'primary':'info',
						}, 1==params.row.product_type?'单品':'套餐'),
						])
					}
				},
				{title: '开始时间',key: 'started_at',
					render: (h, params) => {
						return h('div',this.dateFormat(new Date(params.row.started_at*1000),'yyyy-MM-dd'))
					}
				},
				{title: '结束时间',key: 'end_at',
					render: (h, params) => {
						return h('div',this.dateFormat(new Date(params.row.end_at*1000),'yyyy-MM-dd'))
					}
				},
				{
					title: '动作',
					key: 'action',
					align: 'left',
					fixed: 'right',
					width:100,
					render: (h, params) => {
						return h('div', [
							h(Icon, {
								props: {
									type: 'md-create',
									size:'20'
								},
								class:"icon-create",
								on: {
									click: () => {this.$router.push({path:'/welisten/product/edit/'+params.row.id})}
								}
							}, '编辑'),
							h(Icon, {
								props: {
									type: 'md-trash',
									size:'20'
								},
								class:"icon-delete",
								on: {
									click: () => {
										this.onDelete(params.index)
									}
								}
							}, '删除')
						]);
					}
				}

			],
			ruleValidate: {
				realname: [
					{ required: true, message: '请选择倾听者', trigger: 'blur' },
				],
				title: [
					{ required: true, message: '请填写产品标题', trigger: 'blur' }
				],
				multiple: [
					{ required: true, message: '请填写最大倍数', trigger: 'change', type:'number'  }
				],
				status: [
					{ required: true, message: '请填写状态', trigger: 'change', type:'number' }
				],
				sequence: [
					{ required: true, message: '请填写权重', trigger: 'change', type:'number' }
				],
				discount: [
					{ required: true, message: '请填写优金额', trigger: 'change', type:'number'  }
				],
				classify: [
					{ required: true,  type: 'array', min: 1, message: '请选择产品分组', trigger: 'change' },
				],
				started_at: [
					{ required: true, type: 'date', message: '请选择开始时间',  trigger: 'change' }
				],
				end_at: [
					{ required: true, type: 'date', message: '请选择结束时间', trigger: 'change' }
				],
			},
			vform:{
				service_type: 0,
				product_type: 0,
				status:0,
				sequence:1,
				discount:0,
				realname:'',
				percallprice:null,
				percallstep:null,
				pertextprice:null,
				pertextstep:null,
				multiple:1,
				uid:'',
			},
			statusList: [
				{value: 0,label: '暂存'},
				{value: 1,label: '上架'},
				{value: 2,label: '下架'},
			],
			
			classifyList: [],

			productList:[]
		}
	},
	methods:{
		init:function(){
			let self=this
			self.$store.dispatch("setSpinShow",true)

			function action1(){return self.$http.get("/v1/welisten/listeners/tags",{params: { 'token': self.token }})}
			
			self.$http.all([action1()])
			.then(self.$http.spread(function (response1){
				if(200==response1.data.status && 0==response1.data.code)
				{
					response1.data.data.forEach(item=>{
						self.classifyList.push({value: item.id,label: item.name})
					})
					
				}else{self.$Message.error(response1.data.message)}
				
				self.$store.dispatch("setSpinShow",false)
			})).catch(self.$http.spread(function (error1) {
				self.$store.dispatch("setSpinShow",false)
			}))
		},
		changeMenu:function(nid){
			let _index = 0
			this.menuIndex.forEach(item=>{
				if(nid==item.nid){
					_index=item.id
				}
			})
			this.$store.dispatch('setMenuActive',_index+'')
			this.$store.dispatch('setMenuOpen', [_index+''])
			return false;
		},
		changeStartedDate:function(val, obj){
			this.vform.started_at=new Date(val)
		},
		changeEndDate:function(val, obj){
			this.vform.end_at=new Date(val)
		},
		onSearch:function(){
			let self=this
			self.spinShow=true

			function action1(){return self.$http.get("/v1/welisten/products",{params: { 'token': self.token,search:{filterKey:'uid',key:self.vform.uid}}})}
			
			self.$http.all([action1()])
			.then(self.$http.spread(function (response1){
				if(200==response1.data.status && 0==response1.data.code)
				{
					self.productList=response1.data.data
				}else{self.$Message.error(response1.data.message)}
				
				self.spinShow=false
			})).catch(self.$http.spread(function (error1) {
				self.spinShow=false
			}))

		},
		onSave:function(index){
			let self=this
			let _flag=true
			this.$refs.vform.validate((valid) => {
				if (!valid){
					this.$Message.error('请完成必填项')
					_flag=false
				}
			})
			if(!_flag){return}
			let _data = {
				title: this.vform.title,
				service_type: this.vform.service_type,
				product_type: this.vform.product_type,
				status:this.vform.status,
				sequence:this.vform.sequence,
				discount:this.vform.discount,
				started_at:this.vform.started_at.getTime()/1000,
				end_at:this.vform.end_at.getTime()/1000,
				classify:this.vform.classify,
				multiple:this.vform.multiple,
				uid:this.vform.uid
			}
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/products?token="+self.token,{'data':JSON.stringify(_data)})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.$Message.success('操作成功')
				}else{
					self.$Message.error(response.data.message)
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error(error.message)
				self.$store.dispatch("setSpinShow",false)
			})
		},
		onSelectUser:function(){
			this.showBox=true
		},
		onListenerChange:function(obj){
			this.listenerObj=obj
			this.vform.uid=this.listenerObj.uid
			this.vform.realname=this.listenerObj.realname
			this.vform.percallprice=parseFloat(obj.percallprice)
			this.vform.percallstep=parseFloat(obj.percallstep)
			this.vform.pertextprice=parseFloat(obj.pertextprice)
			this.vform.pertextstep=parseFloat(obj.pertextstep)
		},
		onDelete:function(index){this.productList.splice(index,1)},
	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
	},
	computed:{
		...mapGetters(['token','menuIndex'])
	},
}



</script>
<style>
.welisten-product-create .icon-create:hover{color:#2d8cf0;}
.welisten-product-create .icon-delete:hover{color:#ed4014;}
.welisten-product-create .icon-save:hover{color:#19be6b;}
</style>

<style lang="less" scoped>
</style>